<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="mask-image">

        <div style="display: flex; flex-direction: column;">
            原图
            <img class="mask-image" src="../../assets/css/cross-fade/gril.jpg">

            使用图片做遮罩：默认平铺，仅展示非透明部分，支持base64内嵌图片
            <img style="width: 100px;" src="../../assets/css/mask/heart.png">
            <img class="mask-image image-as-mask" src="../../assets/css/cross-fade/gril.jpg">

            使用SVG做遮罩：默认平铺
            <img style="width: 100px;" src="../../assets/css/mask/home-assistant.svg">
            <img class="mask-image svg-as-mask" src="../../assets/css/cross-fade/gril.jpg">

            使用SVG图形中mask元素作为遮罩元素
            <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="25" cy="25" rx="20" ry="10" fill="#000000" stroke="none"></ellipse>
                <rect x="15" y="5" width="20" height="40" rx="5" ry="5" fill="#000000" stroke="none"></rect>
            </svg>
            <svg width="50" height="50" style="width: 0; height: 0; position: absolute;" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <defs>    
                    <mask id="mask" maskContentUnits="objectBoundingBox">
                        <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
                        <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
                    </mask>
                </defs>
            </svg>
            <img class="mask-image svgmask-as-mask" src="../../assets/css/cross-fade/gril.jpg">

            image-set()功能符资源作为遮罩元素: CSS image-set()的主要作用是可以让不同屏幕密度设备加载不同的图片资源
            <img class="mask-image image-set-as-mask" src="../../assets/css/cross-fade/gril.jpg">

            cross-fade()功能符资源作为遮罩元素: cross-fade(img1, img2, percentage)作用是让第一个图片与第二个图片percentage透明混合
            <img class="mask-image cross-fade-as-mask" src="../../assets/css/cross-fade/gril.jpg">

            渐变作为遮罩图片
            <img class="mask-image gradient-as-mask" src="../../assets/css/cross-fade/gril.jpg">
        </div>

        <hr class="hr-solid-content" data-content="mask-mode">

        <p>mask-mode: alpha （基于透明度），luminance（基于亮度），match-source（根据图片类型自动适应）</p>

        <hr class="hr-solid-content" data-content="mask-repeat">

        <p>mask-repeat: repeat-x（x轴平铺），repeat-y（y轴平铺），repeat（xy平铺），no-repeat（不平铺），space（表示遮罩图片尽可能的平铺同时不发生任何剪裁），round（表示遮罩图片尽可能靠在一起没有任何间隙，同时不发生任何剪裁。这就意味着图片可能会有比例的缩放）。</p>

        <hr class="hr-solid-content" data-content="mask-position">

        <p>遮罩图片定位，支持关键字：top，left，bottom，right。默认值：0% 0%。</p>
        
        <hr class="hr-solid-content" data-content="mask-clip">

        <p>遮罩区域：content-box，padding-box，border-box，fill-box，stroke-box，view-box，no-clip</p>

        <hr class="hr-solid-content" data-content="mask-origin">

        <p>遮罩图片起点定位：content-box，padding-box，border-box，fill-box，stroke-box，view-box</p>

        <hr class="hr-solid-content" data-content="mask-size">

        <p>遮罩图片起点定位：cover，contain，auto，百分比，绝对值（px..），相对值（em..） </p>

        <hr class="hr-solid-content" data-content="mask-composite">

        <p>多遮罩图片混合方式</p>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.mask-image {
    margin: 8px 0;
    width: 400px;
}

.image-as-mask {
    mask-image: url("../../assets/css/mask/heart.png");
}

.svg-as-mask {
    mask-image: url("../../assets/css/mask/home-assistant.svg");
    mask-size: 80px 50px;
}

.svgmask-as-mask {
    mask-image: url("#mask");
}

.image-set-as-mask {
    mask-image: image-set(
        url("../../assets/css/mask/heart.png") 1x,
        url("../../assets/css/mask/home-assistant.svg") 2x
    );

    mask-size: 80px 50px;
}

.cross-fade-as-mask {
    mask-image: -webkit-cross-fade(
        url("../../assets/css/mask/heart.png"),
        url("../../assets/css/mask/home-assistant.svg"),
        50%
    );

    mask-size: 80px 50px;
}

.gradient-as-mask {
    mask-image: linear-gradient(
        to right bottom,
        transparent 0%,
        #000000 100%
    );
}
</style>